import { useState, useEffect, useRef } from 'react';
import { Form, Input, Button, InputNumber } from 'antd';
import { WhseBinSelect, WhseSelect } from '@/components/FormItemSelect';
import QuerySelect from '@/components/QuerySelect';
import { useIntl } from 'umi';

const FormItem = Form.Item;

const formLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14 },
};

const InvCheckModal = (props: any) => {
  const [loading, setLoading] = useState(true);
  const [freshNum, setFreshNum] = useState(1);
  const [params, setParams] = useState({ whse: 'WGJ' });
  const formRef = useRef<any>(null);
  const intl = useIntl();

  const handleSubmit = (values: any) => {
    const { onSubmit } = props;
    if (typeof onSubmit === 'function') {
      onSubmit(values);
    }
  };

  const setCurrent = (part?: any) => {
    const PartBOM: any = {};
    PartBOM.partNum = part.PartNum;
    PartBOM.partDescription = part.PartDescription;
    PartBOM.ium = part.IUM;
    formRef.current.setFieldsValue(PartBOM);
  };

  useEffect(() => {
    const { formVals } = props;
    if (formVals) {
      formRef.current.setFieldsValue(formVals);
      setLoading(false);
    }
  }, [props]);

  const selectBin = (e: any) => {
    setFreshNum(freshNum + 1);
    setParams({ whse: e });
  };

  const formRender = () => {
    return (
      <Form {...formLayout} ref={formRef} onFinish={handleSubmit}>
        <Form.Item
          label={intl.formatMessage({ id: 'pages.partNum' })}
          required
        >
          <Input.Group compact>
            <Form.Item
              noStyle
              name="partNum"
              rules={[{ required: true, message: intl.formatMessage({ id: 'pages.partNum.required' }) }]}
            >
              <Input style={{ width: 200 }} />
            </Form.Item>
            <Form.Item noStyle>
              <QuerySelect
                width={680}
                sysReportName="PartSearch"
                text={intl.formatMessage({ id: 'pages.select' })}
                title={intl.formatMessage({ id: 'pages.partNum' })}
                btntype="primary"
                setCurrent={setCurrent}
                scroll={{ x: 'max-content', y: '200px' }}
                params={{ InActive: 'false' }}
              />
            </Form.Item>
          </Input.Group>
        </Form.Item>
        <FormItem
          name="partDescription"
          label={intl.formatMessage({ id: 'pages.partDescription' })}
          rules={[{ required: true, message: intl.formatMessage({ id: 'pages.partDescription.required' }) }]}
        >
          <Input.TextArea disabled />
        </FormItem>
        <FormItem
          name="ium"
          label={intl.formatMessage({ id: 'pages.IUM' })}
          rules={[{ required: true, message: intl.formatMessage({ id: 'pages.IUM.required' }) }]}
        >
          <Input disabled style={{ width: 60 }} />
        </FormItem>
        <WhseSelect
          label={intl.formatMessage({ id: 'pages.warehouseCode' })}
          showSearch={true}
          rules={[{ required: true, message: intl.formatMessage({ id: 'pages.warehouseCode.required' }) }]}
          name='warehouseCode'
          placeholder={intl.formatMessage({ id: 'pages.warehouseCode' })}
          setCurrent={(e: any) => selectBin(e)}
        />
        <WhseBinSelect
          required={true}
          showSearch={true}
          name="binNum"
          label={intl.formatMessage({ id: 'pages.binNum' })}
          placeholder={intl.formatMessage({ id: 'pages.binNum' })}
          params={params}
          freshNum={freshNum}
        />
        <FormItem
          name="lotNum"
          label={intl.formatMessage({ id: 'pages.lotNum' })}
        >
          <Input />
        </FormItem>
        <FormItem
          name="onhandQty"
          label={intl.formatMessage({ id: 'pages.onhandQty' })}
        >
          <InputNumber  min={0} />
        </FormItem>
        <FormItem wrapperCol={{ offset: 6 }}>
          <Button type="primary" htmlType="submit">
            {intl.formatMessage({ id: 'pages.confirm' })}
          </Button>
        </FormItem>
      </Form>
    );
  };

  return formRender();
};

export default InvCheckModal;
